<!--
 * @Author: liaoxing
 * @Date: 2021-08-31 13:47:11
 * @LastEditors: liaoxing
 * @LastEditTime: 2021-09-01 09:58:45
 * @Description: file content
 * @FilePath: \数据中心\src\components\_initBoard\initBoard.vue
-->

<template>
  <div class="financeWrap">
    <div class="financeInner flexColumn" :style="{transform: zoom, left: left}">
      <Top :title="title"></Top>
      <div class="contentBox flex1 flex">
        <div class="leftBox">
          <slot name="left"></slot>
        </div>
        <div class="centerBox">
          <slot name="center"></slot>
        </div>
        <div class="rightBox">
          <slot name='right'></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Top from '@/components/_Header/Top'
export default {
  components: { Top },
  props: {
    title: {
      type: String,
      default: () => '配置看板名字Title'
    }
  },
  data() {
    return {
      zoom: 'scale(1)',
      left: 0,
      fullScreenDom: null,
    }
  },
  created() {
  },
  mounted() {
    /* 局部适配操作 */
    this.fullScreenDom = document.querySelector('.fullScreenBox')
    this.changeProp()
    window.onresizeArr.push(this.changeProp)
  },
  methods: {
    /* 局部全屏适配 */
    changeProp() {
      let timeOut = setTimeout(() => {
        clearTimeout(timeOut)
        let height = document.querySelector('.financeWrap').offsetHeight
        let width = document.querySelector('.financeWrap').offsetWidth
        let prop = height / 1080
        this.zoom = 'scale(' + prop + ')'
        if (this.fullScreenDom.offsetHeight === window.screen.height) {
          if (prop === 1) {
            this.left = 0
            return
          }
          let innerWidth = (window.innerWidth - document.querySelector('.financeInner').offsetWidth * prop) / 2
          this.left = innerWidth + 'px'
        } else {
          this.left = (width - 1832 * prop) / 2 + 'px'
        }
      }, 100)
    }
  },
}
</script>

<style scoped lang='less'>
.financeWrap {
  overflow: hidden;
  font-size: 12px;
  background-color: #000051;
  height: 100%;
  width: 100%;
  .financeInner {
    position: relative;
    margin: 0 auto;
    width: 1832px;
    height: 1080px;
    transform-origin: 0 0;
    .contentBox {
      background: transparent;
      box-sizing: border-box;
      padding: 20px;
      .leftBox,
      .rightBox {
        width: 33%;
        height: 100%;
      }
      .centerBox {
        width: 55%;
        margin: 0 1%;
        height: 100%;
      }
    }
  }
}
</style>
